<template>
  <div>
    <p class="p1">欢迎光临—vue开发的收银系统—水果店</p>
    <table class="tb">
      <tr>
        <td><h4>苹果10￥/斤，折扣&lt;8折&gt;</h4></td>
      </tr>
      <tr>
        <td>请输入你要购买的斤数<input v-model.number="jin" type="text" placeholder="0"></td>
      </tr>
      <tr>
        <td><button @click='fn'>结账买单~</button></td>
      </tr>
      <tr>
        <td>结账单:总价:{{price}}￥元折后价:{{zhe}}￥元省了:{{save}}￥元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data(){
    return {
     jin:'',
     price:'',
     zhe:'',
     save:''
    }
  },
  methods:{
    fn(){ 
      
    this.price=10*this.jin,
    this.zhe=this.price-2*this.jin,
    this.save=this.price-this.zhe
    this.jin=''
    }
  }
}
</script>

<style>
.p1 {text-align: center;}
.tb {
  border-collapse: collapse;
  width: 50%;
  margin: 0 auto;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}
</style>
